<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单校验</title>
    <script>
        function tipUsername() {
            document.getElementById("s1").innerHTML = "<span style='color:blue;font-size: 12px;padding-left: 5px;'>用户名由英文字母或者数字组成,长度5-16位</span>";
        }

        function checkUsername() {
            let btn = document.getElementById("btn");
            let username = document.getElementById("username").value;
            let regExp = /^[0-9a-z]{5,16}$/i;
            if (regExp.test(username)) {
                document.getElementById("s1").innerHTML = "<span style='color:green;font-size: 12px;padding-left: 5px;'>用户名格式正确</span>";
                btn.disabled = false;
                return true;
            }
            document.getElementById("s1").innerHTML = "<span style='color:red;font-size: 12px;padding-left: 5px;'>用户名格式有误</span>";
            btn.disabled = true;
            return false;
        }
        function tipPassword() {
            document.getElementById("s2").innerHTML = "<span style='color:blue;font-size: 12px;padding-left: 5px;'>密码由英文字母数字!@#%&*特殊字符组成,长度8-14位</span>";
        }
        function checkPassword() {
            let password = document.getElementById("password").value;
            let regExp = /^[a-z0-9!@#%&*]{8,14}$/i;
            if (regExp.test(password)) {
                document.getElementById("s2").innerHTML = "<span style='color:green;font-size: 12px;padding-left: 5px;'>密码格式正确</span>";
                return true;
            }
            document.getElementById("s2").innerHTML = "<span style='color:red;font-size: 12px;padding-left: 5px;'>密码格式有误</span>";
            return false;
        }
        function tipPhone() {
            document.getElementById("s3").innerHTML = "<span style='color:blue;font-size: 12px;padding-left: 5px;'>手机号码由11位数字组成,且必须以13、15、18、19开头</span>";
        }

        function checkPhone() {
            let phone = document.getElementById("phone").value;
            let regExp = /^[1][3589]\d{9}$/i;
            if (regExp.test(phone)) {
                document.getElementById("s3").innerHTML = "<span style='color:green;font-size: 12px;padding-left: 5px;'>手机号码格式正确</span>";
                return true;
            }
            document.getElementById("s3").innerHTML = "<span style='color:red;font-size: 12px;padding-left: 5px;'>手机号码格式有误</span>";
            return false;
        }
        function tipEmail() {
            document.getElementById("s4").innerHTML = "<span style='color:blue;font-size: 12px;padding-left: 5px;'>请输入正确的邮箱</span>";
        }

        function checkEmail() {
            let email = document.getElementById("email").value;
            let regExp = /^[0-9a-z]\w+[@][0-9a-z]+(\.com)(\.cn)?$/i;
            if (regExp.test(email)) {
                document.getElementById("s4").innerHTML = "<span style='color:green;font-size: 12px;padding-left: 5px;'>邮箱格式正确</span>";
                return true;
            }
            document.getElementById("s4").innerHTML = "<span style='color:red;font-size: 12px;padding-left: 5px;'>邮箱格式有误</span>";
            return false;
        }

        function checkForm() {
            if (checkUsername() && checkPassword() && checkPhone() && checkEmail()) {
                return true;
            }
            return false;
        }
    </script>
</head>
<body>
<form action="28-来抓我呀.html" onsubmit="return checkForm()">
    账号:<input type="text" id="username" onfocus="tipUsername()" onblur="checkUsername()"><span id="s1"></span><br>
    密码:<input type="password" id="password" onfocus="tipPassword()" onblur="checkPassword()"><span id="s2"></span><br>
    电话:<input type="text" id="phone" onfocus="tipPhone()" onblur="checkPhone()"><span id="s3"></span><br>
    邮箱:<input type="text" id="email" onfocus="tipEmail()" onblur="checkEmail()"><span id="s4"></span><br>
    <input type="submit" id="btn" value="提交">
</form>
</body>
</html>